<template>
  <div>
    <el-dialog v-model="editVisible" width="43%" top="5%" :close-on-click-modal="false" @close="handleclose"
      :title="add_form.id ? '编辑' : '添加'">
      <el-form label-width="120px">
        <el-form-item label="区/路：" v-if="add_form.id">
          <el-cascader ref="parent_select" style="width: 220px" :options="campusList" v-model="add_form.areaCode" :props="{
            label: 'areaName',
            children: 'child',
            value: 'areaCode',
          }" @change="handleAreaCode"></el-cascader>
        </el-form-item>
        <el-form-item label="楼栋：" v-if="add_form.id">
          <el-cascader ref="parent_select" style="width: 220px" v-model="add_form.buildAreaCode"
            :options="parent_category" :props="{
              label: 'areaName',
              children: 'child',
              value: 'areaCode',
            }" @change="handleChangeAreaCodeEdit"></el-cascader>
        </el-form-item>
        <el-form-item label="房间号：" :required="true">
          <el-select placeholder="请选择" class="width_accout" v-model="add_form.regionId">
            <el-option v-for="item in RoomList" :key="item.id" :label="item.roomNum" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="绑定设备：" :required="true">
          <el-input placeholder="请输入" class="width_accout" v-model="add_form.imei" :disabled="isCentral == 1"></el-input>
        </el-form-item>
        <el-form-item label="绑定分路：" :required="true">
          <el-input placeholder="请输入" class="width_accout" v-model="add_form.shunt" :disabled="isCentral == 1"></el-input>
        </el-form-item>
        <el-form-item label="电器属性：">
          <el-select placeholder="请选择" class="width_accout" v-model="add_form.description">
            <el-option v-for="item in ElectricalPropertiesList" :key="item.paramName" :label="item.paramName"
              :value="item.paramName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="品牌：">
          <el-select placeholder="请选择" class="width_accout" v-model="add_form.brandName">
            <el-option v-for="item in brandList" :key="item.paramName" :label="item.paramName"
              :value="item.paramName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="型号：">
          <el-input placeholder="请输入" class="width_accout" v-model="add_form.modelName"></el-input>
        </el-form-item>
        <el-form-item label="计算电量：" v-if="isCentral != 1">
          <el-radio-group v-model="add_form.isCount">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- isCentral  == 1 为中央空调 -->
        <el-form-item label="维修状态：" v-if="add_form.id && isCentral != 1">
          <el-radio-group v-model="add_form.isOperate">
            <el-radio :label="1">维修中（不计算电量）</el-radio>
            <el-radio :label="0">正常</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="空开分路：" v-if="isCentral != 1">
          <el-input placeholder="请输入" class="width_accout" v-model="add_form.switchShunt"></el-input>
        </el-form-item>
        <el-form-item label="分控温度上限：">
          <el-select placeholder="请选择" class="width_accout" v-model="add_form.tempTop">
            <el-option v-for="item in CtlTemperature" :key="item.paramName" :label="item.paramName"
              :value="item.paramName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分控温度下限：">
          <el-select placeholder="请选择" class="width_accout" v-model="add_form.tempLowest">
            <el-option v-for="item in CtlTemperature" :key="item.paramName" :label="item.paramName"
              :value="item.paramName"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注：" v-if="add_type == 1">
          <el-input placeholder="请输入" class="width_accout" v-model="add_form.remark"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="handleclick">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive } from "vue";
import { dictionaries } from "../assets/js/dictionaries";
export default {
  components: {},
  setup(props, context) {
    console.log(context);
    const add_form = reactive(context.attrs.add_form);
    const editVisible = ref(context.attrs.editVisible);
    const isCentral = ref(context.attrs.isCentral);
    const add_type = ref(context.attrs.type);
    const campusList = ref(context.attrs.campusList);
    const RoomList = ref(context.attrs.RoomList);
    const parent_category = ref(context.attrs.parent_category);
    const handleclose = () => {
      editVisible.value = false;
      context.emit("handleclose", editVisible.value);
    }; // 电器属性
    const ElectricalPropertiesList = ref([]);
    dictionaries("ElectricalProperties").then((res) => {
      ElectricalPropertiesList.value = res;
    });
    // 电器属性
    const brandList = ref([]);
    dictionaries("brand").then((res) => {
      brandList.value = res;
    });
    // 分控温度
    const CtlTemperature = ref([]);
    dictionaries("ControlTemperature").then((res) => {
      Object.keys(res).forEach((idx) => {
        res[idx].paramName = Number(res[idx].paramName);
      });
      CtlTemperature.value = res;
    });
    const handleclick = () => {
      context.emit("handleclick", add_form, editVisible.value);
    };
    const handleAreaCode = (res) => {
      context.emit("handleAreaCode", res);
    };
    const handleChangeAreaCodeEdit = (res) => {
      add_form.regionId = null;
      context.emit("handleChangeAreaCodeEdit", res);
    };
    return {
      parent_category,
      add_type,
      RoomList,
      add_form,
      editVisible,
      CtlTemperature,
      ElectricalPropertiesList,
      brandList,
      campusList,
      isCentral,
      switchList: [
        {
          value: 0,
          label: "开启",
        },
        {
          value: 1,
          label: "关闭",
        },
      ],
      pattern: [
        {
          value: 0,
          label: "自动",
        },
        {
          value: 1,
          label: "手动",
        },
      ],
      handleChangeAreaCodeEdit,
      handleAreaCode,
      handleclick,
      handleclose,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../assets/css/common.css";
@import "../assets/css/device.less";

.el-input {
  width: 215px;
}

&:deep(.el-dialog) {
  background: #fff;
}

// &:deep(.el-overlay){
//   z-index:999!important;
// }
</style>
